<template>
	<view>
		<view class="fixedit" :style="{top:top}">
			<scroll-view class="grace-tab-title grace-center" scroll-x="true" id="grace-tab-title">
				<view v-for="(cate, index) in categories" :key="index" :data-cateid="cate.cateid" :data-index="index" :class="[cateCurrentIndex == index ? 'grace-tab-current' : '']"
				 @tap="tabChange">{{cate.name}}</view>
			</scroll-view>
		</view>
		<view style="height:50px;"></view>
		<!-- 文章内容区 -->
		<view class="grace-news-list" style="width:94%; padding:5px 3%;">
			<view v-for="(item, index) in newsAll" :key="index" @click="goDetail(item.id)">
				<view class="grace-news-list-items">
					<image :src="item.cover" class="grace-news-list-img grace-list-imgs-l" mode="widthFix"></image>
					<view class="grace-news-list-title">
						<view class="grace-news-list-title-main">{{item.title}}</view>
						<text class="grace-news-list-title-desc grace-text-overflow">《{{item.ly}}》{{item.datetime}}</text>
					</view>
				</view>
			</view>
		</view>
		<view style="text-align:center;" v-show="dataShow">数据为空</view>	
	</view>
</template>
<script>
	var page = 1,
		cate = 'A01';
	export default {
		data() {
			return {
				serverUrl: this.serverUrl,
				top: 0,
				//分类信息
				categories: [],
				// 当前选择的分类
				cateCurrentIndex: 0,
				// 演示文章数据
				newsAll: [],
				dataShow: false
			};
		},
		onLoad: function() {
			// #ifdef H5
			this.top = '44px';
			// #endif
			page = 1;
			artList: [];
			this.getNewsCategory();
			this.getNewsList();
		},
		//下拉刷新
		onPullDownRefresh: function() {
			// 重置分页及数据
			page = 1;
			this.newsAll = [];
			this.getNewsList();
		},
		// 加载更多
		onReachBottom: function() {
			this.getNewsList();
		},
		methods: {
			getNewsCategory() {
				var data = {
					dictId: "3",
					pageNumber: 1,
					pageSize: 10,
				};
				uni.request({
					url: this.serverUrl + 'search-api/getDictItem',
					header: {
						"content-type": "application/x-www-form-urlencoded; charset=UTF-8"
					},
					data: data,
					method: "POST",
					success: (r) => {
						// console.log(r);
						if (r.data.code == '000000') {
							//console.log(r.data.data);
							for (var i = 0; i < r.data.data.length; i++) {
								var tmpObj = {
									id: r.data.data[i].id,
									name: r.data.data[i].nameCn,
									cateid: r.data.data[i].value,
								};
								this.categories.push(tmpObj);
							}
						} else {
							uni.showToast({
								title: r.data.message
							});
						}
					},
					fail: (data, code) => {
						console.log('fail' + JSON.stringify(data));
					}
				})
			},
			// 数据和分页是模拟的实际也是这样写
			getNewsList: function() {
				var hideload = 0;
				uni.showLoading();
				uni.request({
					url: this.serverUrl + 'search-api/search',
					data: {
						query: "$type:xwzx AND $recommend:0 AND -$cover:* AND $sslm:" + cate,
						showFields: "id;title;cover;summary;ly;create_time_str",
						sortField: "create_time=desc",
						pageNum: page,
						pageSize: 7,
					},
					header: {
						"content-type": "application/x-www-form-urlencoded; charset=UTF-8"
					},
					method: "POST",
					success: (r) => {
						//console.log(r);
						if (r.data.code == '000000') {
							// 假设已经到底， 实际根据api接口返回值判断
							if (r.data.data.data.length < 1) {
								hideload = 1;
								uni.hideLoading();
								if (this.newsAll.length < 1) {
									this.dataShow = true;
								}else{
									uni.showToast({
										title: "已经加载全部",
										icon: "none",
										duration: 1500
									});
								}
								return;
							}else{
								this.dataShow = false;
							}
							for (var i = 0; i < r.data.data.data.length; i++) {
								var datobj = {
									id: r.data.data.data[i].id,
									cover: r.data.data.data[i].cover == null ? "../../../static/zhaopian.png" : r.data.data.data[i].cover,
									title: r.data.data.data[i].title,
									ly: r.data.data.data[i].ly,
									datetime: r.data.data.data[i].create_time_str,
								};
								this.newsAll = this.newsAll.concat(datobj);
							}
							page++;
						} else {
							uni.showToast({
								title: r.data.message
							});
						}
					},
					complete: r => {
						if (hideload == 0) {
							uni.hideLoading();
						}
						uni.stopPullDownRefresh();
					}
				});
			},
			goDetail(id) {
				uni.navigateTo({
					url: "/pages/news/detail/detail?id=" + id,
				})
			},
			tabChange: function(e) {
				// 选中的索引
				var index = e.currentTarget.dataset.index;
				// 具体的分类id
				var cateid = e.currentTarget.dataset.cateid;
				this.cateCurrentIndex = index;
				// 动态替换内容
				this.content = this.categories[index].name;


				// 读取分类数据
				cate = cateid; //把分类信息发送给api接口即可读取对应分类的数据
				// 重置分页及数据 
				page = 1;
				this.newsAll = [];
				// 加载对应分类数据覆盖上一个分类的展示数据 加载更多是继续使用这个分类
				this.getNewsList();
			}
		}
	}
</script>
<style>
	/* 分段器头部 fixed 定位 */
	.fixedit {
		width: 100%;
		position: fixed;
		z-index: 99;
		left: 0;
		top: 0;
	}

	.grace-tab-title view {
		padding: 0 6px;
		margin: 0 8px;
		line-height: 35px;
	}

	.grace-news-list-imgs {
		max-height: 68px;
		overflow: hidden;
	}
</style>
